<template>
	<jf-navigation through @getHeight="getNavigationHeight">
		<template #left>
			<jf-locale></jf-locale>
		</template>
	</jf-navigation>
	
	<image src="@/static/images/guide/bg.png" class="bg"></image>
	
	<view class="login_container" :style="{'--navigationHeight': data.navigationHeight + 'rpx'}">
		<view class="login_title">{{$t('login.quoted')}}</view>
		<view class="login_form">
			<view class="form_menu">
				<view :class="{'active': data.currentIndex === 0}" @click="handleChange(0)">{{$t('login.menu1')}}</view>
				<view :class="{'active': data.currentIndex === 1}" @click="handleChange(1)">{{$t('login.menu2')}}</view>
			</view>
			<swiper :duration="200" :current="data.currentIndex" class="login_form_swiper" disable-touch>
				<swiper-item>
					<jf-input :icon="email" :placeholder="$t('login.placeholderEmail')" :disabled="data.loading" v-model="form.email"></jf-input>
					<jf-input :icon="password" password :placeholder="$t('login.placeholderPassword')" :disabled="data.loading" v-model="form.password"></jf-input>
				</swiper-item>
				<swiper-item>
					<jf-input :icon="phone" :placeholder="$t('login.placeholderPhone')" :disabled="data.loading" v-model="form.phone"></jf-input>
					<jf-input :icon="password" password :placeholder="$t('login.placeholderPassword')" :disabled="data.loading" v-model="form.password"></jf-input>
				</swiper-item>
			</swiper>
			<view class="login_form_btns">
				<view @click="router.go({url:'/pages/login/register/register',disabled:data.loading})">{{$t('login.register')}}</view>
				<view @click="router.go({url:'/pages/login/forget/forget',disabled:data.loading})">{{$t('login.forget')}}?</view>
			</view>
			<view class="form_submit">
				<zq-button-ts :loading="data.loading" @click="submit()">{{$t('login.submit')}}</zq-button-ts>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, getCurrentInstance } from 'vue';
	import email from "@/static/images/common/input_icon_email.png"
	import phone from "@/static/images/common/input_icon_phone.png"
	import password from "@/static/images/common/input_icon_password.png"
	import Form from "@/static/utils/Form"
	import Route from "@/static/utils/Route"
	import { login, getUserinfo } from "@/api/login"
	import { useStore } from "@/store/main"
	
	const store = useStore()
	const { proxy } = getCurrentInstance()
	const router = new Route();
	const data = reactive({
		navigationHeight: 0,
		currentIndex: 0,
		loading: false
	})
	const form = reactive({
		email: undefined,
		phone: undefined,
		password: undefined
	})
	
	const getNavigationHeight = (height:number):void =>{
		data.navigationHeight = height
	}
	const handleChange = (currentIndex: 0 | 1):void =>{
		if(data.loading) return
		if(data.currentIndex !== currentIndex){
			Form.resetForm(form);
		}
		data.currentIndex = currentIndex
	}
	const submit = ():void =>{
		if(data.currentIndex === 0 && !form.email){
			uni.showToast({
				title: proxy.$t('login.placeholderEmail'),
				icon: 'none'
			})
		}else if(data.currentIndex === 1 && !form.phone){
			uni.showToast({
				title: proxy.$t('login.placeholderPhone'),
				icon: 'none'
			})
		}else if(!form.password){
			uni.showToast({
				title: proxy.$t('login.placeholderPassword'),
				icon: 'none'
			})
		}else{
			data.loading = true;
			login({
				account: data.currentIndex === 0 ? form.email : form.phone,
				password: form.password,
				type: data.currentIndex === 0 ? 2 : 1
			}).then((res:any) => {
				uni.setStorageSync("token", res.data.token)
				getUserinfo().then((res:any) => {
					store.setUserinfo(res.data)
					store.saveIp()
					router.redirect({
						url: res.data.is_basic === 1 ? "/pages/index/index" : "/pages/login/basics/basics",
						delay: 1000,
						message: proxy.$t("login.success"),
						messageIcon: 'success'
					})
				}).catch(() => {
					data.loading = false
					uni.showToast({
						title: proxy.$t('login.fail'),
						icon: 'none'
					})
				})
			}).catch(() => {
				data.loading = false
				uni.showToast({
					title: proxy.$t('login.fail'),
					icon: 'none'
				})
			})
		}
	}
</script>

<style lang="scss">
	.login_container{
		--top: var(--navigationHeight);
		padding-top: var( --top );
		.login_title{
			width: 100vw;
			height: 190rpx;
			line-height: 44rpx;
			font-size: 40rpx;
			color: #1F2937;
			font-weight: 600;
			padding: 52rpx 0 0 48rpx;
			box-sizing: border-box;
		}
		.login_form{
			position: relative;
			width: 100vw;
			height: calc(100vh - var(--top) - 190rpx);
			background: #ffffff;
			border-radius: 56rpx 56rpx 0 0;
			.login_form_swiper{
				width: 100%;
				height: 272rpx;
			}
			.login_form_btns{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 654rpx;
				font-size: 24rpx;
				color: var(--color-primary);
				line-height: 33rpx;
				margin-left: 48rpx;
				font-weight: 500;
			}
		}
	}
</style>